<style type="text/css">
	#Con{
		background-color:#F8F8F8;
		overflow:hidden;
	}
	#Content{
		position:absolute;
		margin:auto;
		left:0;
		right:0;
		top:61px;
		bottom:106px;
		width:70%;
		font-size:0;
		background-color:#FFF;
		border:1px solid #DDD;
		overflow:hidden;
	}
	div.head{
		background-color:#3F4044;
		border-bottom:3px solid #FF8000;
		min-width:980px;
	}
	div.left-logo span.brand{
		color:#FFF;
	}
	ul.menu{
		font-size:0;
		margin:auto;
		text-align:right;
	}
	li.menu-item{
		color:#FFF;
		width:120px;
		line-height:58px;
		vertical-align:middle;
		display:inline-block;
		text-align:center;
	}
	a.active li.menu-item{
		background-color:#FF8000;
	}
	li.menu-item p{
		font-size:18px;
	}
	ul.pop-list{
		display:none;
		position:absolute;
		top:24px;
		right:0;
		width:130px;
		text-align:center;
		border-style:solid;
		border-color:#DDD;
		border-width:1px 1px 0 1px;
		border-radius:2px;
		background-color:#FFF;
		z-index:100;
	}
	ul.pop-list li.item{
		cursor:pointer;
		font-size:14px;
		line-height:34px;
		height:34px;
		color:#515456;
		border-bottom:1px solid #DDD;
	}
	ul.pop-list li.item:hover{
		background-color:#F0F0F0;
	}
	div.footer{
		width:100%;
		min-width:980px;
		height:106px;
		position:absolute;
		z-index:1010;
		bottom:0;
		font-size:14px;
		color:#767D82;
		background-color:#FFF;
		text-align:center;
	}
	div.separate-line{
		height:2px;
		background:url(/luci-static/images/color_line.png?_=20170809165512) repeat;
	}
	div.pic-bottom{
		position:absolute;
		top:14px;
		left:200px;
		width:251px;
		height:90px;
		background:url(/luci-static/images/pic_bottombar.png?_=20170809165512) no-repeat;
	}
	div.hotline{
		display:inline-block;
		width:240px;
		height:62px;
		text-align:left;
	}
	i.phone-img{
		font-size:28px;
		color:#FF8000;
	}
	span.phone-tip{
		font-size:14px;
		line-height:28px;
		vertical-align:top;
		color:#767D82;
		margin-top:3px;
		margin-left:5px;
	}
	p.phone-num{
		font-size:24px;
		color:#FF8000;
	}
	div.route-info{
		display:inline-block;
	}
	div.info{
		position:relative;
		z-index:100;
		padding-bottom:20px;
		padding-top:20px;
		margin:auto;
	}
	div.info a{
		color:#767D82;
		margin-right:2em;
	}
	p.copyright{
		text-align:left;
		margin-top:20px;
	}
	/*1080p适配*/
	@media screen and (min-device-width:1920px){
		li.menu-item {
			width: 172px;
			line-height: 80px;
		}
		li.menu-item p {
			font-size: 24px;
		}
		ul.pop-list li.item {
			font-size: 18px;
			line-height: 50px;
			height: 50px;		
		}
		ul.pop-list {
			width: 160px;
		}
		#Content {
			top: 81px;
			bottom: 130px;
		}
		ul.pop-list {
			top: 34px;
		}
		div.footer {
			font-size: 18px;
			height: 130px;
		}
		span.phone-tip {
			font-size: 18px;
			line-height: 38px;
		}
		i.phone-img {
			font-size: 38px;
		}
	}	
</style>
<script type="text/javascript">
(function(){
	function initList(id, list, callback){
		var target = $("#" + id);
		var ul = $('<ul class="pop-con pop-list"></ul>').insertAfter(target);

		var len = list.length;
		for (var i = 0; i < len; i++){
			$('<li class="item" data-value="' + list[i].value + '">' + list[i].name + '</li>').appendTo(ul);
		}

		ul.delegate("li", "click", function(){
			$(this).parent().hide("fast");
			callback && callback($(this).attr("data-value"));
		});

		target.click(function(e){
			$(this).next("ul").toggle("fast");
			e.stopPropagation();
		});

		$("body").click(function(e){
			$(".pop-con").hide("fast");
			e.stopPropagation();
		});
	}

	var toolList = [{name:btn.reboot, value:0},
					{name:btn.timeReboot, value:3},
					{name:label.modifyAdmPwd, value:2},
					{name:btn.logout, value:1}];

	initList("Tool", toolList, function(val){
		switch(parseInt(val, 10)){
		case 0:
			showConfirm(label.routerReboot, function(choose){
				if (choose){
					$.sendAjax('/system/reboot', null, function(){
						showProgressBar(label.rebootEquipment, label.rebooting, ROUTER.time.reboot, function(){
							window.location.reload();
						});

						$.setTimeout(function(){
							// 检测LAN是否可以连接DUT
							lanDetecting(function(){
								window.location.reload();
							});
						}, ROUTER.time.detectDelay);
					});
				}
			});
			break;
		case 1:
			logout();
			break;
		case 2:
			showModifyPwd();
			break;
		case 3:
			showTimeReboot();
			break;
		default:
			break;
		}
	});

	var contentScroll = new NiceScroll("Content");
	contentScroll.init();

	function checkUpgrade(){	// 升级弹窗
		var para = {
			system:{upgrade_info:{action:"get"}}
		};

		tryCheckUpgradeNum++;
		apiGet(para, function(data){
			var info = data[K_MODULE]["system"]["upgrade_info"];
			var status = info.running_status;

			if ("pc.schemeUpgrade" == stateman.current.name){
				return;		// 已经在策略升级弹窗页面，无需再检测
			}

			if ("2" == status){	// 升级检查完成
				if ("1" == info.status_code){	// 有新版本
					loadWidget("upgradeWgt.htm", function(){
						$("#curent").text(info.sw_ver).attr("title",info.sw_ver);
						$("#new").text(info.new_ver).attr("title",info.new_ver);
						$("#time").text(info.release_time).attr("title",info.release_time);

						if (info.release_log){
							var log = unescape(info.release_log.replace(/#x/g,'%u').replace(/\n/g,'<br>'));
							$("#log").html(log);
						}
					});
				}
			}else{
				if (tryCheckUpgradeNum <= 5){
					setTimeout(checkUpgrade, 3000);
				}
			}
		});
	}

	var tryCheckUpgradeNum = 0;
	var upgradeLater = "show";

	try{
		upgradeLater = sessionLS.getItem("upgradeWgt");
	}catch(e){}

	if (upgradeLater !== "hide"){
		var para = {
			system:{upgrade_info:{action:"start"}}
		};

		apiGet(para, function(){
			tryCheckUpgradeNum = 0;
			setTimeout(checkUpgrade, 3000);
		});
	}
})();
</script>
<div class="head">
	<div class="left-logo">
		<img class="logo" src="/luci-static/images/phicomm.png?_=20170809165512" alt="phicomm" />
		<span class="brand">{%label.phicomm%}</span>
	</div>
	<ul class="menu center-con">
		<a href="#/pc/netState" data-active="netState"><li class="menu-item">
			<p>{%label.netState%}</p>
		</li></a>
		<a href="#/pc/deviceManage" data-active="deviceManage"><li class="menu-item">
			<p>{%label.devManage%}</p>
		</li></a>
		<a href="#/pc/wifiSet" data-active="wifiSet"><li class="menu-item">
			<p>{%label.wifiSet%}</p>
		</li></a>
		<a href="#/pc/App" data-active="App"><li class="menu-item">
			<p>{%label.appSet%}</p>
		</li></a>
	</ul>
	<ul class="right-tool">
		<li class="tool-item">
			<i id="Tool" class="icon icon_router"></i>
		</li>
		<li id="HelpIcon" class="tool-item"><i class="icon icon_help"></i></li>
	</ul>
</div>
<div id="Content" class="center-con"></div>
<div class="footer">
	<div class="separate-line"></div>
	<div class="pic-bottom"></div>
	<div class="info center-con">
		<div class="hotline">
			<i class="icon icon_phone phone-img"></i><span class="phone-tip">{%label.hotline%}</span>
			<p class="phone-num">4007-567-567</p>
		</div>
		<div class="route-info">
			<a href="javascript:showUserAgreement();" class="user-agreement">{%label.userAgreement%}</a>
			<%
				local para = {device = {info = {}}}
				local result = tpl_get_data(para)
				local dev_mac = result[K_MODULE].device.info.mac
			-%>
			<span>{%label.macAddr%}{%label.colon%}<span id="RouterMac"><%=dev_mac%></span></span>
			<p class="company copyright">{%label.phicommTechnologyCoLtd%}</p>
		</div>
	</div>
</div>